<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>React DevTools</title>
  <style>
    html,
    body {
      width: 100vw;
      height: 100vh;
      padding: 0;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    * {
      box-sizing: border-box;
    }

    #hint {
      margin: 1em;
      font-size: 16px;
    }

    #root {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="hint">Connecting to ReactDevToolsProxy...</div>
  <div id="root"></div>
  <script type="importmap">
    {
      "imports": {
        "react-devtools-core/standalone": "./react-devtools/standalone.js"
      }
    }
  </script>
  <script type="module">
    import DevTools from "react-devtools-core/standalone";

    /**
     * Private command to support DevTools frontend reload
     */
    const RELOAD_COMMAND = 'Expo::RELOAD';

    function connectAsync(url) {
      return new Promise((resolve, reject) => {
        const ws = new WebSocket(url);

        ws.addEventListener("open", () => {
          resolve(ws);
        });

        ws.addEventListener("close", (e) => {
          reject(e);
        });

        ws.addEventListener("error", (e) => {
          reject(e);
        });
      });
    }

    async function delayAsync(timeMs) {
      return new Promise((resolve) => setTimeout(resolve, timeMs));
    }

    async function connectAsyncWithRetries(url) {
      while (true) {
        try {
          const ws = await connectAsync(url);
          document.getElementById("hint").style.display = "none";
          return ws;
        } catch {
          document.getElementById("hint").style.display = "block";
          await delayAsync(5000);
        }
      }
    }

    async function main() {
      const ws = await connectAsyncWithRetries("ws://localhost:8097");

      ws.addEventListener("close", () => {
        document.getElementById("hint").style.display = "block";
        main();
      });
      DevTools.setContentDOMNode(document.getElementById("root"));
      ws.send(RELOAD_COMMAND);
      DevTools.connectToSocket(ws);
    }

    main();
  </script>
</body>

</html>
